<template>
  <q-input @click="show" outlined :model-value="shelf.typeName" label="选择货架">
    <q-dialog v-model="visible">
      <q-card style="max-height: calc(100vh - 2rem); max-width: 90vw">
        <q-card-section class="row items-center q-gutter-x-sm no-wrap overflow-auto" style="min-width: 20rem;">
          <template v-if="$q.screen.gt.xs">
            <div class="text-h6 text-bold text-center text-grey-7">选择货架</div>
            <q-space/>
          </template>
          <q-select v-model="shelfType" :options="shelfTypes" label="选择规格"
                    behavior="menu" outlined dense style="min-width: 8rem"
                    option-label="name"/>
        </q-card-section>
        <q-separator/>
        <q-slide-transition>
          <div v-if="shelfList.length !== 0">
            <q-card-section
              style="max-height: calc(100vh - 10rem); min-height: 10rem; min-width: 15rem; overflow: auto"
              class="row items-center justify-center">
              <q-card v-for="mapPose in shelfList" v-bind:key="mapPose.id"
                      class="q-ma-sm"
                      @click="select(mapPose)"
                      style="min-width: 15rem">
                <q-card-section class="row items-center">
                  <div class="text-h6 text-bold text-black no-wrap overflow-hidden"
                       style="width: calc(100% - 4rem); height: 2rem">{{ mapPose.id.substring(0,10) + '...' }}</div>
                </q-card-section>
                <q-separator />
                <q-list>
                  <q-item dense v-for="item in items" v-bind:key="item.key" clickable v-ripple>
                    <q-item-section>{{ item.title }}</q-item-section>
                    <q-item-section side>{{ mapPose[item.key]}}</q-item-section>
                  </q-item>
                </q-list>
              </q-card>
            </q-card-section>
          </div>
        </q-slide-transition>
      </q-card>
    </q-dialog>
  </q-input>
</template>

<script>
import { onMounted, ref, watch } from 'vue'
import { api } from 'boot/axios'
import { useAPIStore } from 'stores/api/index.js'

const items = [
  { title: '货架层数', key: 'level' },
  { title: '地图名称', key: 'mapName' },
  { title: '导航点名称', key: 'mapPoseName' }
]

export default {
  name: 'ShelfSelector',
  props: {
    modelValue: String
  },
  setup (props, context) {
    const visible = ref(false)

    const shelf = ref({})
    const shelfType = ref()
    const shelfTypes = ref([])

    const shelfList = ref([])
    const orderUrl = useAPIStore().orderUrl
    function getShelf () {
      if (props.modelValue !== '') {
        api.get(orderUrl + 'shelf/id/' + props.modelValue).then(rs => {
          shelf.value = rs.data
          api.get(orderUrl + 'shelfType/id/' + shelf.value.shelfType).then(rs => {
            shelfType.value = rs.data
          })
        })
      }
    }
    watch(shelfType, value => {
      api.get(orderUrl + 'shelf/type/' + value.id).then(rs => {
        shelfList.value = rs.data
      })
    })
    function getMaps () {
      api.get(orderUrl + 'shelfType/all').then(rs => {
        shelfTypes.value = rs.data
      })
    }
    onMounted(() => {
      getShelf()
      getMaps()
    })

    return {
      shelfType,
      shelfTypes,
      shelfList,
      items,
      shelf,
      visible,
      show () {
        getShelf()
        visible.value = true
      },
      select (data) {
        shelf.value = data
        context.emit('update:modelValue', shelf.value.id)
        visible.value = false
      }
    }
  }
}
</script>
